<template>
  <div class="app-container d-flex">
    <div class="header-title">3号楼1层拓扑图</div>
    <div class="tree" id="tree" @click="closeMenu"></div>

    <div v-if="menuVisible" class="context-menu" :style="menuStyle">
      <span class="el-dropdown-link" @click="showInfo">展开</span>
    </div>

    <el-dialog :title="dialogTitle" custom-class="treeopen" :visible.sync="dialogVisible">
      <div class="d-flex w-100 h-100" v-if="dialogVisible">
        <div class="menu">
          <div v-for="(item,index) in menuList" :key="index" class="menuItem d-flex-center"
               :class="{'active': selectName==item.menuName}" @click="selectName = item.menuName">
            <div>
              <img class="icon" :src="selectName==item.menuName ? item.activeMenuIcon : item.menuIcon"/>
              <div>{{item.menuName}}</div>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div v-show="selectName=='设备详情'" class="w-100 h-100 p-3">
            <div class="w-100 height-66 d-flex">
              <div class="width-33 h-100 p-2">
                <div class="w-100 h-100 border_one p-3 d-flex flex-column">
                  <div class="title">今日用电量（kW*H）</div>
                  <div class="flex-1">
                    <div class="height-66 d-flex-center font_item2">3776.2</div>
                    <div class="height-33">
                      <el-image class="w-100 h-100" :src="echart_zxtIcon" fit="cover"></el-image>
                    </div>
                  </div>
                </div>
              </div>
              <div class="width-33 h-100 p-2">
                <div class="w-100 h-100 border_one p-3 d-flex flex-column">
                  <div class="title">设备温度（℃）</div>
                  <div class="flex-1">
                    <div class="w-100 h-100" id="echart_two"></div>
                  </div>
                </div>
              </div>
              <div class="width-33 h-100">
                <div class="w-100 height-25 p-2">
                  <div class="w-100 h-100 border_one font_item1 d-flex-center pointer">一键合闸</div>
                </div>
                <div class="w-100 height-25 p-2">
                  <div class="w-100 h-100 border_one font_item1 d-flex-center pointer">一键分闸</div>
                </div>
                <div class="w-100 height-50 p-2">
                  <div class="w-100 h-100 border_one d-flex-center2">
                    <el-image style="width: 70px;height: 70px;" :src="noFault" fit="cover"></el-image>
                    <div class="font_item1 mt-3">暂无故障</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-100 height-33 d-flex">
              <div class="width-33 h-100 p-2">
                <div class="w-100 h-100 border_one p-3 d-flex-center2">
                  <div class="title">单相电压（V）</div>
                  <div class="d-flex-center flex-1 ">
                    <div v-for="(item,index) in numberList" :key="index"
                         class="number_item d-flex-center number_item_color1 mr-2">
                      {{item}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="width-33 h-100 p-2">
                <div class="w-100 h-100 border_one p-3 d-flex-center2">
                  <div class="title">单相电流（A）</div>
                  <div class="d-flex-center flex-1 ">
                    <div v-for="(item,index) in numberList" :key="index"
                         class="number_item d-flex-center number_item_color2 mr-2">
                      {{item}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="width-33 h-100 p-2">
                <div class="w-100 h-100 border_one p-3 d-flex-center2">
                  <div class="title">单相功率（W）</div>
                  <div class="d-flex-center flex-1 ">
                    <div v-for="(item,index) in numberList" :key="index"
                         class="number_item d-flex-center number_item_color3 mr-2">
                      {{item}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="selectName=='负载走势图'" class="w-100 h-100 p-3">
            <div class="w-100 h-100 p-2">
              <div class="border_one w-100 h-100" id="line_first"></div>
            </div>
          </div>
          <div v-show="selectName=='能耗走势图'" class="w-100 h-100 p-3">
            <div class="w-100 h-100 p-2">
              <div class="border_one w-100 h-100" id="line_second"></div>
            </div>
          </div>
          <div v-show="selectName=='故障列表'" class="w-100 h-100 p-3">
            <div class="w-100 h-100 p-2">
              <div class="w-100 h-100 border_one p-4">
                <div
                  class="d-flex justify-content-around align-items-center font-white font-weight-bold height-40p warning-row">
                  <div class="w-1 d-flex-center">序号</div>
                  <div class="w-3 d-flex-center">设备名称</div>
                  <div class="w-3 d-flex-center">故障名称</div>
                  <div class="w-3 d-flex-center">故障时间</div>
                </div>
                <div class="font-white height-40p-calc over-auto-y">
                  <div class="d-flex justify-content-around align-items-center height-30p"
                       v-for="(item,index) in tableData3" :key="index"
                       :class="index % 2 == 0 ? 'success-row' : 'warning-row'">
                    <div class="w-1 d-flex-center">{{index + 1}}</div>
                    <div class="w-3 d-flex-center">{{item.deviceName}}</div>
                    <div class="w-3 d-flex-center">{{item.gzName}}</div>
                    <div class="w-3 d-flex-center">{{item.gzTime}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import charts from './chart.js'
  import { getDeviceTreeListV2, getDeviceTreeList } from "@/api/dormOneBuildingOneFloor/system";

  export default {
    components: {},
    data() {
      return {
        dataList: [],
        timeout: -1,
        freshTimeout: -1,
        flag: 1,
        colors: ['#aaaaaa', '#00ff00', '#ffff00', '#ff0000'],
        hzColors: [],
        menuVisible: false,
        menuStyle: {},
        dialogVisible: false,
        keyType: '3-1',
        topCode: 'TPO001',
        crrentCode: '',
        crrentDataList: [],
        dialogTitle: '',
        resultMsg: '',

        menuList: [
          {
            menuName: '设备详情',
            menuIcon: require('@/assets/tptMenuIcon/sbxq.png'),
            activeMenuIcon: require('@/assets/tptMenuIcon/sbxq_select.png')
          },
          {
            menuName: '负载走势图',
            menuIcon: require('@/assets/tptMenuIcon/fzzs.png'),
            activeMenuIcon: require('@/assets/tptMenuIcon/fzzs_select.png')
          },
          {
            menuName: '能耗走势图',
            menuIcon: require('@/assets/tptMenuIcon/nhzs.png'),
            activeMenuIcon: require('@/assets/tptMenuIcon/nhzs_select.png')
          },
          {
            menuName: '故障列表',
            menuIcon: require('@/assets/tptMenuIcon/gzlb.png'),
            activeMenuIcon: require('@/assets/tptMenuIcon/gzlb_select.png')
          },
        ],
        selectName: '设备详情',
        echart_zxtIcon: require('@/assets/tptMenuIcon/echart_zxtIcon.png'),
        noFault: require('@/assets/tptMenuIcon/noFault.png'),
        numberValue: '220.6',
        numberList: [],

        oneCarData: {
          xData: ['12-18', '12-19', '12-20', '12-21', '12-22', '12-23',],
          seriesData: ['5', '0', '1', '3', '7', '4', '1'],
        },
        tableData3: [
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
          {deviceName: '3107室-照明开关', gzName: '打火告警', gzTime: '2024-12-23 06:23:25'},
        ]
      }
    },
    created() {
      this.queryInitData();

      this.timeout = setInterval(() => {
        this.queryInitData();
      }, 15 * 1000);
    },
    mounted() {
      this.floatToStringArray(this.numberValue)
    },
    beforeDestroy() {
      clearInterval(this.timeout);
      clearInterval(this.freshTimeout);
      charts.creanTime();
    },
    methods: {
      floatToStringArray(number) {
        // 使用split方法将字符串切割成单个字符数组
        this.numberList = number.split('');
      },
      // 鼠标右击展开
      rightClick(param) {
        let event = param.event.event;
        this.crrentCode = param.data.deviceCode;
        this.dialogTitle = param.data.deviceName;
        event.preventDefault();
        // 设置菜单的位置
        this.menuStyle = {
          top: `${event.clientY - 25}px`,
          left: `${event.clientX - 70}px`
        };

        this.menuVisible = true;
      },
      // 鼠标右击展开按钮关闭
      closeMenu() {
        this.menuVisible = false;
      },
      // 展开详细信息
      showInfo() {
        this.closeMenu();

        this.dialogVisible = true;

        this.$nextTick(() => {
          charts.ybpEchart('echart_two', '24')
          charts.oneLineEchart('line_first', this.oneCarData)
          charts.twoLineEchart('line_second', this.oneCarData)
        })

        // getDeviceTreeList({devcCode: this.crrentCode}).then(res => {
        //   if (res.status == 200) {
        //     this.crrentDataList = res.object || [];
        //
        //     if (this.crrentDataList.length > 0) {
        //       for (let i in this.crrentDataList) {
        //         this.crrentDataList[i].flag = 1;
        //         this.crrentDataList[i].name = "0_1";
        //         this.flag = 1;
        //         this.crrentDataList[i].info = [
        //           {name: "设备名称", value: this.crrentDataList[i].deviceName},
        //           {name: "配电箱名称", value: this.crrentDataList[i].pdxDeviceName}
        //         ]
        //         this.formDataList(this.crrentDataList[i], 1);
        //       }
        //     }
        //   } else {
        //     this.crrentDataList = [];
        //     this.resultMsg = res.message;
        //   }
        //
        //   this.dialogVisible = true;
        //   this.$nextTick(() => {
        //     if (charts.getDataReady()) {
        //       charts.treeEchart("ptree", this.crrentDataList);
        //     } else {
        //       setTimeout(() => {
        //         charts.treeEchart("ptree", this.crrentDataList);
        //       }, 300)
        //     }
        //   })
        // })
      },

      queryInitData() {
        getDeviceTreeListV2({topCode: this.topCode}).then(res => {
          if (res.status == 200) {
            this.dataList = res.object || [];

            if (this.dataList.length > 0) {
              for (let i in this.dataList) {
                this.dataList[i].flag = 1;
                this.dataList[i].name = "0_1";
                this.flag = 1;
                this.dataList[i].info = [
                  {name: "设备名称", value: this.dataList[i].deviceName},
                  {name: "配电箱名称", value: this.dataList[i].pdxDeviceName}
                ]
                this.dataList[i].label = {
                  shadowColor: this.dataList[i].pdxDeviceColor, //this.getHZColor(this.dataList[i].pdxDeviceColor),
                  shadowOffsetY: -6,
                }
                this.formDataList(this.dataList[i], 1);
              }
            }
          }

          this.$nextTick(() => {
            this.setTreeData();
          })
        })
      },
      formDataList(data, level) {
        if (data.childrenList && data.childrenList.length > 0) {
          data.children = data.childrenList;
          for (let i in data.children) {
            this.flag++;
            data.children[i].flag = this.flag;
            data.children[i].name = level + '_' + this.flag;
            data.children[i].lineStyle = {
              color: data.children[i].lineColor == null ? 'blue' : this.colors[data.children[i].lineColor + 1]
            }

            let pdx = require('@/assets/icon/pdx.png');
            let czKg = require('@/assets/icon/czKg.png');
            let ktKg = require('@/assets/icon/ktKg.png');
            let zmKg = require('@/assets/icon/zmKg.png');
            let ysj = require('@/assets/icon/ysj.png');
            let xyj = require('@/assets/icon/xyj.png');
            let otherKg = require('@/assets/icon/otherKg.png');

            let src = null

            if (data.children[i].deviceName.indexOf('配电箱') != -1) {
              src = pdx
            } else if (data.children[i].deviceName.indexOf('空调开关') != -1) {
              src = ktKg
            } else if (data.children[i].deviceName.indexOf('插座开关') != -1) {
              src = czKg
            } else if (data.children[i].deviceName.indexOf('照明开关') != -1) {
              src = zmKg
            } else if (data.children[i].deviceName.indexOf('饮水机') != -1) {
              src = ysj
            } else if (data.children[i].deviceName.indexOf('洗衣机') != -1) {
              src = xyj
            } else {
              src = otherKg
            }

            data.children[i].label = {
              backgroundColor: {
                image: src
              },
              shadowColor: data.children[i].pdxDeviceColor, //this.getHZColor(data.children[i].pdxDeviceColor),
              shadowOffsetY: -6,
            }

            data.children[i].info = [
              {name: "设备名称", value: data.children[i].deviceName},
              {name: "配电箱名称", value: data.children[i].pdxDeviceName}
            ]
            if (data.children[i].childrenList && data.children[i].childrenList.length > 0) {
              this.formDataList(data.children[i], level + 1);
            }
          }
        }
      },
      setTreeData() {
        clearTimeout(this.freshTimeout);
        if (charts.getDataReady()) {
          charts.treeEchart("tree", this.dataList, this.rightClick, this.closeMenu);
          charts.treeEchart("tree", this.dataList, null, this.closeMenu);
        } else {
          this.freshTimeout = setTimeout(() => {
            this.setTreeData();
          }, 300)
        }
      },

      generateRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }

        if (this.hzColors.includes(color)) {
          return this.generateRandomColor();
        } else {
          return color;
        }
      },

      getHZColor(type) {
        if (!this.hzColors[type]) {
          this.hzColors[type] = this.generateRandomColor();
        }
        return this.hzColors[type];
      },
    }
  }
</script>
<style lang="scss" scoped>
  .app-container {
    position: relative;
  }

  .header-title {
    padding: 20px;
    position: absolute;
    font-size: 20px;
    color: #6ca7b4;

    &:before {
      content: '';
      width: 12px;
      height: 12px;
      margin-right: 8px;
      background: #83c95c;
      border-radius: 50%;
      display: inline-block;
    }
  }

  .tree {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .context-menu {
    position: fixed;
    z-index: 1000;

    .el-dropdown-link {
      background-color: #235056;
      border-radius: 4px;
      padding: 10px 15px;
      box-shadow: 0px 0px 27px 0px rgba(154, 200, 233, 0.22) inset, 0px 0px 5.2px 0px #6ca7b4;
      color: #6ca7b4;
      font-size: 14px;
      cursor: pointer;
    }
  }

  ::v-deep .treeopen.el-dialog {
    background: radial-gradient(#074b56, #051b1f);
    width: 1157px;
    margin-top: 120px !important;
    border-radius: 8px;
    overflow: hidden;

    .el-dialog__header {
      background: #024c57;
      height: 48px;
      line-height: 48px;
      padding: 0 20px;

      .el-dialog__title {
        font-size: 16px;
        color: #5cdbe5;
      }

      .el-dialog__headerbtn {
        top: 14px;
      }

      .el-dialog__close {
        font-size: 20px;
        color: #5cdbe5;
      }
    }

    .el-dialog__body {
      height: 600px;
      padding: 0 0px;

      .menu {
        position: relative;
        width: 130px;
        height: 100%;
        font-size: 16px;
        color: #999999;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #044148;
        padding-bottom: 10px;

        .menuItem {
          height: 25%;
          width: 100%;
          border-bottom: 1px solid #585858;

          .icon {
            width: 50px;
            height: 50px;
            margin-bottom: 8px;
          }

          div {
            text-align: center;
          }

          &.active {
            color: #35FFE7;
            border-bottom: 1px solid #585858;
            border-image: linear-gradient(90deg, rgba(53, 255, 231, 0.00), #35ffe7 50%, rgba(53, 255, 231, 0.00) 100%) 1 1;
          }
        }
      }
    }
  }


  .height-84 {
    height: 83.5%;
  }

  .height-66 {
    height: 66.5%;
  }

  .height-50 {
    height: 50%;
  }

  .height-33 {
    height: 33.3%;
  }

  .height-25 {
    height: 25%;
  }

  .height-16 {
    height: 16.5%;
  }

  .width-33 {
    width: 33.33%;
  }

  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }

  .title {
    font-size: 16px;
    color: #ffffff;
    height: 26px;
    width: 100%;
  }

  .number_item {
    width: 38px;
    height: 57px;
    border-radius: 4px;
    font-size: 40px;
    font-family: Impact, Impact-400;
    color: #ffffff;
  }

  .number_item_color1 {
    background: linear-gradient(203deg, #9490ff 0%, #464399 100%);
  }

  .number_item_color2 {
    background: linear-gradient(180deg, #feca67, #9e7c39 100%);
  }

  .number_item_color3 {
    background: linear-gradient(180deg, #63b4ff, #0071b2 100%);
  }

  .font_item1 {
    font-size: 18px;
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #35ffe7;
  }

  .font_item2 {
    font-size: 58px;
    font-family: DIN, DIN-700;
    font-weight: 700;
    color: #ffffff;
  }

  .height-40p {
    height: 40px;
  }

  .height-30p {
    height: 40px;
  }

  .height-40p-calc {
    height: calc(100% - 40px);
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .warning-row {
    background: #0B414D;
  }

  .success-row {
    background: #204B5D;
  }
</style>
